<template >
  <div class="bigBox">
    <el-container class="layout-container-demo" style="height: 1500px">
      <el-aside width="200px">
        <el-scrollbar class="leftcat">
          <el-menu >
            <el-sub-menu >
              <template #title>消息</template>
              <div class="fontBox">
              <div class="router-div"><router-link to="/communication">系统通知</router-link> </div>
              <div class="router-div"> <router-link to="/communication/interaction">互动通知 </router-link></div>
              <div class="router-div"> <router-link to="/communication/orderForm">订单通知 </router-link></div>
              </div>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container class="is-vertical">
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            {{ route.meta.title }}
          </div>
        </el-header>

        <el-main>
          <router-view></router-view>

        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute } from"vue-router";
  const route = useRoute()


const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))


</script>


<style>
/*body {*/
/*  background-color: #f5f7f9 !important;*/
/*}*/
</style>


<style scoped>

.bigBox{
  width: 1200px;
  margin: 0 auto;
}

a{
  color: #2d2e2f;
  outline: none;
  text-decoration: none;
}
a:hover{
  color: pink;
}
.actived {
  color: red;
}

.leftcat{
  margin-right: 20px;
  background-color: white;
}
.layout-container-demo .el-menu {
  border-right: none;

}
.layout-container-demo .el-main {
  margin: 0 20px 0 20px  ;
  background-color: white;
}
.is-vertical {
  background-color: white;
}
.el-card__body{
  margin: 20px 0 20px 0 ;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 20px;
  width: 980px;
  height: 100%;
  right: 20px;
}
.router-div{
  margin: 10px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
</style>

